<template>
    <div>
        <div class="m-page">
            <!-- 轮播 -->
            <div class="carousel btn_banner">
              <carousel-component :bannerList="bannerList" :height="height"></carousel-component>
            <!-- 融资需求 -->
            <div class="banner-from">
                <div class="from-title">融资需求</div>
                <form action="">
                    <div class="from-cell">
                        <div class="c-left">融资方式</div>
                        <div class="c-right">
                            <label><input name="Fruit" type="radio" value="" checked />企业融资 </label>
                            <label><input name="Fruit" type="radio" value="" />个人融资 </label>
                        </div>
                    </div>
                    <div class="from-cell">
                        <div class="c-left">融资金额</div>
                        <div class="c-right">
                            <input type="text" placeholder="单位/万元">
                            <div class="input-tip">单位：万元，最小值10万元</div>
                        </div>
                    </div>
                    <div class="from-cell top60">
                        <div class="c-left">期限</div>
                        <div class="c-right">
                            <select name="" id="">
                                <option value="">请选择贷款期限</option>
                            </select>
                        </div>
                    </div>
                    <div class="f-btn">
                        <button>发布需求</button>
                    </div>
                </form>
            </div>
            </div>
            <!-- 01融资大数据 -->
            <div class="container-model one">
                <div class="container">
                    <div class="con-title">
                        <span>01</span>
                        融资大数据
                        <p>FINANCING BIG DATA</p>
                    </div>
                    <div class="con-introduce">针对金融垂直领域的大数据分析，用数据来支撑您的所有决策</div>
                    <div class="con-items">
                        <div class="i-item technology">
                            <div class="item-container">
                                <div class="item-text">科技企业</div>
                                <div class="item-num">
                                    <span>5582</span>
                                    家
                                </div>
                            </div>
                        </div>
                        <div class="i-item finance">
                            <div class="item-container">
                                <div class="item-text">金融机构</div>
                                <div class="item-num">
                                    <span>23</span>
                                    家
                                </div>
                            </div>
                        </div>
                        <div class="i-item capitalize">
                            <div class="item-container">
                                <div class="item-text">融资需求</div>
                                <div class="item-num">
                                    <span>5169</span>
                                    家
                                </div>
                            </div>
                        </div>
                        <div class="i-item money">
                            <div class="item-container">
                                <div class="item-text">融资金额</div>
                                <div class="item-num">
                                    <span>1,6254</span>
                                    万元
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <!-- 02金融创新产品 -->
            <div class="container-model two">
                <div class="container">
                    <div class="con-title">
                        <span>02</span>
                        金融创新产品
                        <p>Financial Innovation Products</p>
                    </div>
                    <div class="con-items">
                        <div class="i-item" v-for="(item,index) in two_data" :key="index">
                            <div class="item-con">
                                <div class="item-left">
                                    <img :src="item.img" alt="">
                                </div>
                                <div class="item-right">
                                    <div class="r-name">{{item.name}}</div>
                                    <p>合作银行： {{item.num}}家</p>
                                    <p>企业定位：{{item.position}}</p>
                                </div>
                            </div>
                        </div>
                        <div class="i-item">
                            <p>
                                查看更多
                                <img src="../../../static/images/66 (2).png" alt="">
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 03热点政策 -->
            <div class="container-model three">
                <div class="container">
                    <div class="con-title">
                        <span>03</span>
                        热点政策
                        <p>Hot Policy</p>
                    </div>
                    <div class="con-items">
                        <div class="item-left ">
                            <div class="left-img">
                                <img src="../../../static/images/71.png" alt="">
                            </div>
                            <div class="left-text">关于推进苏州工业园区科技型中小企业债权融资的实施办法</div>
                            <div class="left-box">
                                <img src="../../../static/images/1204.png" alt="">
                            </div>
                        </div>
                        <div class="item-right">
                            <div class="r-cell" v-for="(item,index) in three_data" :key="index"  @click="three_click(index)">
                                <div class="cell-tit text-overflow">{{item.title}}</div>
                                <div class="cell-text text-overflow">{{item.text}}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 04金融机构 -->
            <div class="container-model four">
                <div class="container">
                    <div class="con-title">
                        <span>04</span>
                        金融机构
                        <p>Financial Institution</p>
                    </div>
                    <div class="con-items">
                        <div class="item-box">
                            <div class="box-tab">
                                <div class="tab-left">
                                    <div class="left-tab" :class="{'on':tab===0}" @click="click_tab(0)">银行</div>
                                    <div class="left-tab" :class="{'on':tab===1}" @click="click_tab(1)">租赁</div>
                                    <div class="left-tab" :class="{'on':tab===2}" @click="click_tab(2)">担保</div>
                                    <div class="left-tab" :class="{'on':tab===3}" @click="click_tab(3)">其他</div>
                                </div>
                                <div class="tab-right">
                                    <span><img src="../../../static/images/jrlj_tel.png" alt=""></span>
                                    金融机构联系方式
                                </div>
                            </div>
                            <div class="box-bands">
                                <ul>
                                    <li><img src="../../../static/images/jry_xyyh.png" alt=""></li>
                                    <li><img src="../../../static/images/jry_zsyh.png" alt=""></li>
                                    <li><img src="../../../static/images/jry_pfyh.png" alt=""></li>
                                    <li><img src="../../../static/images/jry_xmyh.png" alt=""></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>
<script>
  import CarouselComponent from '../../views/localPage/CarouselComponent'
export default {
  components:{CarouselComponent},
    data(){
        return{
            bannerList:["../../../static/images/banner2.png","../../../static/images/banner2.png","../../../static/images/banner2.png"],
            two_data:[
                {
                    name:'我易贷',
                    num:'4',
                    position:'科技型中小企业',
                    img:'../../../static/images/68.png',
                },
                {
                    name:'我易贷',
                    num:'4',
                    position:'科技型中小企业',
                    img:'../../../static/images/68.png',
                },
                {
                    name:'我易贷',
                    num:'4',
                    position:'科技型中小企业',
                    img:'../../../static/images/68.png',
                },
                {
                    name:'我易贷',
                    num:'4',
                    position:'科技型中小企业',
                    img:'../../../static/images/68.png',
                },
                {
                    name:'我易贷',
                    num:'4',
                    position:'科技型中小企业',
                    img:'../../../static/images/68.png',
                },
            ],
            three_data:[
                {
                    title:'关于推进苏州工业园区科技型中小企业债权融资的实施办法',
                    text:'缓解园区科技型中小企业融资难问题, 创新科技型中小企业融资渠道，降低科技科技...',
                },
                {
                    title:'关于推进苏州工业园区科技型中小企业债权融资的实施办法',
                    text:'缓解园区科技型中小企业融资难问题, 创新科技型中小企业融资渠道，降低科技科技...',
                },
                {
                    title:'关于推进苏州工业园区科技型中小企业债权融资的实施办法',
                    text:'缓解园区科技型中小企业融资难问题, 创新科技型中小企业融资渠道，降低科技科技...',
                },
                {
                    title:'关于推进苏州工业园区科技型中小企业债权融资的实施办法',
                    text:'缓解园区科技型中小企业融资难问题, 创新科技型中小企业融资渠道，降低科技科技...',
                },
            ],
            three_state:0,//点击第几个
            tab:0,//金融机构  tab显示
        }
    },
    methods:{
        three_click(index){
            this.three_state=index;
        },
        click_tab(tab){//04金融机构  tab点击
            this.tab=tab;
        }
    }
}
</script>
<style lang="less" scoped>
    input[type=radio]{
        opacity: 1;
        height: 18px;
        width: 18px;
    }
    .m-page{
        font-family:MicrosoftYaHei-Bold;
        color: #333;
        font-weight:400;
        padding-bottom: 300px;
        .btn_banner{
          position: relative;
            .banner-from{
                z-index: 1000;
                position: absolute;
                top: 0;
                height: 100%;
                right: 17%;
                background:rgba(0,127,216,0.67);
                width: 418px;

                .from-title{
                    margin-top: 70px;
                    color: #fff;
                    font-weight:bold;
                    font-size:30px;
                    text-align: center;
                }
                &>form{
                    color: #fff;
                    font-size: 16px;

                    .from-cell{
                        // padding-left:20%;
                        width: 70%;
                        margin: 20px auto 0;
                        height: 36px;
                        line-height: 36px;
                        &.top60{
                            margin-top: 50px;
                        }
                        .c-left,.c-right{
                            display: inline-block;
                        }
                        .c-left{
                            width: 67px;
                            text-align:justify;
                            text-align-last:justify;
                        }
                        .c-right{
                            float: right;
                            width: 205px;
                            label{
                                display: inline-block;
                                padding-left: 20px;
                                position: relative;
                                margin-right: 10px;
                                &>input[type=radio]{
                                    position: absolute;
                                    left: 0;
                                    top: 18%;
                                }
                            }
                            &>input,select{
                                width: 100%;
                                border: none;
                                height: 36px;
                                background: rgba(255,255,255,.41);
                                text-indent: 1em;
                                border-radius: 2px;
                                color: rgba(255,255,255,0.57);

                            }
                            input{
                                &::-webkit-input-placeholder { /* WebKit browsers */
                                    color: rgba(255,255,255,0.57);
                                }

                                &::-moz-placeholder { /* Mozilla Firefox 19+ */
                                    color: rgba(255,255,255,0.57);
                                }

                                &:-ms-input-placeholder { /* Internet Explorer 10+ */
                                    color: rgba(255,255,255,0.57);
                                }
                            }
                            .input-tip{
                                font-size: 14px;
                                color: rgba(255,255,255,0.57)
                            }

                        }
                    }
                    .f-btn{
                        text-align: center;
                        margin-top: 80px;
                        &>button{
                            height: 50px;
                            line-height: 50px;
                            width: 288px;
                            margin: 0 auto;
                            padding: 0;
                            background:rgba(0,187,236,0.26);
                            border:none;
                            color: #fff;
                            border-radius: 4px;
                            font-size: 18px;
                            font-weight:bold;
                        }
                    }
                }
            }
        }
        .container-model{
            padding: 60px 0;
            background-size: cover;
            .con-title{
                text-align: center;
                font-size: 24px;
                &>span{
                    font-size: 40px;
                    vertical-align: middle;
                    color: #1575F9;
                    font-weight: bold;
                }
                &>p{
                    font-size: 12px;
                }
            }
            .con-items{
                margin-top: 70px;
            }
            &.one{
                .con-introduce{
                    text-align: center;
                    font-size: 16px;
                }
                .con-items{
                    height: 320px;
                    display: flex;
                    .i-item{
                        flex:1;
                        height: 100%;
                        align-items: center;
                        background-size: cover;
                        display: flex;
                        .item-container{
                            height: 184px;
                            width: 172px;
                            background:rgba(0,0,0,0.54);
                            margin: 0 auto;
                            text-align: center;
                            .item-text{
                                font-size: 20px;
                                color: #459EFF;
                                font-weight:bold;
                                margin-top: 35px;
                            }
                            .item-num{
                                color: #1EA4FB;
                                font-size: 18px;
                                width: 82%;
                                margin: 20px auto 0;
                                &>span{
                                    font-size: 35px;
                                    font-weight: bold;
                                }
                            }
                        }

                        &.technology{
                            background: url(../../../static/images/70.png) no-repeat;
                        }
                        &.finance{
                            background: url(../../../static/images/68.png) no-repeat;
                        }
                        &.capitalize{
                            background: url(../../../static/images/67.png) no-repeat;
                        }
                        &.money{
                            background: url(../../../static/images/66.png) no-repeat;
                        }
                    }
                }
            }
            &.two{
                background: url(../../../static/images/bg70.png) no-repeat;
                .con-title{
                    color: #fff;
                    &>span{
                        font-size: 40px;
                        vertical-align: middle;
                        color: #fff;
                        font-weight: bold;
                    }
                    &>p{
                        font-size: 12px;
                    }
                }
                .con-items{
                    .i-item{
                        // width: 30%;
                        width: 360px;
                        margin-right: 15px;
                        margin-top: 30px;
                        display: inline-block;
                        background: url(../../../static/images/bg69.png);
                        height: 220px;
                        border-radius: 10px;
                        .item-con{
                            margin-top: 45px;
                            padding: 0 15px;
                            .item-left{
                                display: inline-block;
                                width: 120px;
                                height: 120px;
                                border-radius: 120px;
                                overflow: hidden;
                                img{
                                    width: 100%;
                                    height: 100%;
                                }
                            }
                            .item-right{
                                float: right;
                                text-align: center;
                                width: 205px;
                                .r-name{
                                    color: #001633;
                                    font-size: 20px;
                                    margin-bottom: 20px;
                                }
                                &>p{
                                    color: #666666;
                                    font-size: 16px;
                                    margin-top: 5px;
                                }
                            }
                        }
                        &:last-child{
                            float: right;
                            &>p{
                                text-align: center;
                                margin-top: 25%;
                                color: #1575F9;
                                font-size: 24px;
                            }
                        }
                        &:nth-child(3n){
                            margin-right: 0;
                            float: right;
                        }
                    }
                }
            }
            &.three{
                .con-items{
                    .item-left{
                        padding: 20px 0 0 20px;
                        position: relative;
                        display: inline-block;
                        .left-img{
                            width: 536px;
                            img{
                                width: 100%;
                            }
                        }
                        .left-box{
                            position: absolute;
                            left: 0;
                            top: 0;
                        }
                        .left-text{
                            text-align: center;
                            font-size: 18px;
                            margin-top: 40px;
                        }
                    }
                    .item-right{
                        float: right;
                        width: 500px;
                        .r-cell{
                            border-top: 2px solid rgba(230,230,230,1);
                            padding: 25px 0 25px 30px;
                            position: relative;
                            &:before{
                                content: '>';
                                position: absolute;
                                top: 15px;
                                left: 0;
                                font-size: 30px;
                                color: #999999;
                            }
                            .cell-tit{
                                font-size: 18px;
                            }
                            .cell-text{
                                font-size: 14px;
                                color: #999;
                            }
                            &:hover{
                                &:before,.cell-tit,.cell-text{
                                    color: #1575F9
                                }
                            }
                        }
                    }
                }
            }
            &.four{
                background: url(../../../static/images/bg72.png) no-repeat;
                .con-title{
                    color: #1575F9;
                    &>span{
                        font-size: 40px;
                        vertical-align: middle;
                        color: #1575F9;
                        font-weight: bold;
                    }
                    &>p{
                        font-size: 12px;
                        color: #1575F9;
                    }
                }
                .con-items{
                    height: 366px;
                    background:rgba(0,101,195,0.71);
                    .item-box{
                        padding: 20px 20px 0;
                        .box-tab{
                            height: 50px;
                            line-height: 50px;
                            border-bottom: 2px solid #fff;
                            color: #fff;
                            .tab-left{
                                display: inline-block;
                                padding-left: 15px;
                                .left-tab{
                                    display: inline-block;
                                    margin-right: 20px;
                                    font-size: 20px;
                                    &.on{
                                        font-size: 24px;
                                        font-weight: bold;
                                    }
                                }
                            }
                            .tab-right{
                                float: right;
                                font-size: 18px;
                                &>span{
                                    margin-right: 5px;
                                }
                            }
                        }
                        .box-bands{
                            margin-top: 67px;
                            &>ul{
                                display: flex;
                                li{
                                    display: inline-block;
                                    flex: 1;
                                    margin-right: 10px;
                                    &:last-child{
                                        margin-right: 0;
                                    }
                                    img{
                                        width: 100%;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
</style>
